<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/verify.css">
    <script src="/scripts/jquery-1.8.3.js"></script>
    <script src="/scripts/verify.js"></script>
    <META name=GENERATOR content="MSHTML 8.00.7601.17514">
</head>
<body>

<DIV id=header class=wrap>
    <DIV id=logo><IMG src="/images/logo.gif"></DIV>
</DIV>
<DIV id=regLogin class=wrap>
    <DIV class=dialog>
        <DIV class=box>
            <H4>用户登录</H4>
            <FORM id=user method="post" action="/user/login_user">
                <DIV class=infos>
                    <TABLE class=field>
                        <TBODY>
                        <TR>
                            <TD colSpan=2></TD>
                        </TR>
                        <TR>
                            <TD class=field>用 户 名：</TD>
                            <TD><INPUT id=user_name class=text type=text name="user.uname">
                                <span></span>
                            </TD>
                        </TR>
                        <TR>
                            <TD class=field>密　　码：</TD>
                            <TD><INPUT id=user_password class=text type=password name="user.upass"></TD>
                        </TR>

                        <tr id="ensure" style="display: none">
                            <td class="field">验 证 码：</td>
                            <td>
                                <div id="mpanel3" style="margin-top: 20px">
                                </div>
                                <button type="button" id="check-btn2" class="verify-btn">确定</button>
                                <span></span>
                            </td>
                        </tr>

                        </TBODY>
                    </TABLE>
                    <DIV class=buttons><INPUT id="onload" value=登陆 type="submit"> <INPUT
                            onclick='document.location="/reg.jsp"' value=注册 type=button>
                    </DIV>
                    <div id="result" style="text-align: center">${requestScope.result}</div>
                    <script>
                        var count =${requestScope.count};
                        if (count > 3) {
                            $("#ensure").show();
                            $("#onload").attr("disabled", true);
                        }
                    </script>
                </DIV>
            </FORM>
        </DIV>
    </DIV>
</DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD>
    </DL>
</DIV>

</body>

<script>

    $("#user_name").focus(function () {
        $("#result").hide();
    })

    $("#user_name").blur(function () {
        var username = $(this).val(); //获取用户名
        var i = "<img style='height: 15px;width: 15px' src=\"/images/wait.jpg\">"; //执行Ajax查询前输入等待照片,提示用户验证等待中,提升用户体验
        $(this).next().html(i); //插入图片
        $.ajax({
            type: "post",
            url: "/user/ensuregetUserByName",
            data: {username: username},
            success: function (data) {
                if (data == "true") { //返回为true说明存在该用户名,在输入框后显示对号
                    var img = "<img style='height: 10px;width: 10px' src=\"/images/ri.JPG\">" + " 用户名正确!!";
                    $("#user_name").next().html(img);
                    $("#user_name").next().css("color", "green");
                    var ensure = $("#ensure").css("display");
                    if (ensure == "none"){   //账号输入正确后,若验证码模块display样式为none说明此时还未弹出验证码,去掉登录按钮的disable属性
                        $("#onload").attr("disabled", false);
                    }else {   //若验证码模块display样式不为none明此时已经出现验证码模块,登录按钮的disable属性还不能取消,直到验证码输入正确后才能修改
                        $("#onload").attr("disabled", true);
                    }
                } else {
                    var img = "<img style='height: 10px;width: 10px' src=\"/images/wr%20.JPG\">" + " 用户名不存在";
                    $("#user_name").next().html(img);
                    $("#user_name").next().css("color", "red");
                    $("#onload").attr("disabled", true);
                }
            }
        })
    })
    $("#user_name").click(function () { //点击该框时后面提示内容清空
        $(this).next().html("");
    })


    $('#mpanel3').codeVerify({
        type: 2,
        figure: 100,	//位数，仅在type=2时生效
        arith: 0,	//算法，支持加减乘，不填为随机，仅在type=2时生效
        width: '240px',
        height: '30px',
        fontSize: '30px',
        btnId: 'check-btn2',
        ready: function () {
        },
        success: function () {
            $('#mpanel3').siblings("span").html("验证码正确");
            $('#mpanel3').siblings("span").css("color","#66CC99");
            var msg = $("#user_name").next().text();
            if (msg.trim() == "用户名正确!!"){  //验证成功后如果用户名不正确,仍然不能提交
                $("#onload").attr("disabled", false);
            }
        },
        error: function () {
            $('#mpanel3').siblings("span").html("验证码不匹配");
            $('#mpanel3').siblings("span").css("color","red");
            $("#onload").attr("disabled", true);
        }
    });

</script>
</html>
